<template>
	<div>
		<!-- compouted -->
		<h1>{{ name }}</h1>
		<h2 :name="newName"></h2>
		<button @click="name = '2020-12-09'">修改name</button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			name: '学习computed',
		}
	},
	computed: {
		// 1. 监听一个数据，返回一个计算后的新值
		// 2. 不要对监听的数据进行赋值
		newName() {
			console.log(this.name)
			return this.name + '改变了'
		},
	},
}
</script>
